<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        input {
            outline: none;
        }

        li {
            list-style: none;
        }

        em,
        i {
            font-style: normal;
        }

        .container {
            width: 350px;
            margin: 200px auto;
            background: rgb(234, 231, 231, .6);
            text-align: center;
            padding: 10px 15px 20px;
            color: rgb(220, 29, 22);
        }

        .container>h2 {
            font-weight: 400;
            margin-bottom: 10px;
        }

        .container>section {
            background: #fff;
            padding: 5px 5px 10px;
        }

        .container>section input::placeholder {
            /* text-indent: 1em; */
            color: rgb(184, 181, 181);
            font-style: italic;
        }

        .container>section>div {
            display: flex;
            justify-content: center;
        }

        .container>section input {
            width: 240px;
            height: 40px;
            border: 2px solid rgb(220, 29, 22);
            border-right: none;
            border-radius: 5px 0 0 5px;
            padding-left: 1em;
        }

        .container>section button {
            height: 40px;
            line-height: 40px;
            background: rgb(220, 29, 22);
            color: #fff;
            padding: 0 5px;
            border: 1px solid rgb(220, 29, 22);
            border-radius: 0 5px 5px 0;
            font-size: 14px;
        }

        .container>section li {
            position: relative;
            text-align: left;
            color: #949090;
            padding-left: 2px;
            border-bottom: 1px solid rgb(184, 181, 181);
            height: 30px;
            line-height: 30px;
        }

        .container>section li>em {
            margin-right: 10px;
        }

        .container>section li>i {
            /* line-height: 0; */
            position: absolute;
            /* top: 50%; */
            /* transform: translateY(-50%); */
            padding: 0 5px;
            right: 10px;
            color: rgb(220, 29, 22);
            cursor: pointer;
        }

        footer {
            display: flex;
            padding: 0 5px;
            justify-content: space-between;
            font-size: 10px;
            color: rgb(184, 179, 179);
            margin-top: 10px;
        }

        footer>p:last-child {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container" v-cloak>
        <h2>小黑记事本</h2>
        <section>
            <div>
                <input type="text" placeholder="请输入任务" v-model="taskName" @keyup="keyAdd">
                <button @click="add()">添加任务</button>
            </div>
            <ol>
                <li v-for="(v, i) in tasks">
                    <em v-text="(i + 1) + '.'"></em>
                    <span v-text="v"></span>
                    <i @click="del(i)">x</i>
                </li>
            </ol>
            <footer>
                <p>合计：<span v-text="tasks.length">0</span></p>
                <p @click="clear">清空任务</p>
            </footer>
        </section>
        <!-- 测试 passive指令修饰符，不阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.passive="sts">点击一下</a>
        <!-- 测试按键修饰符 只要按下了ctrl，单击事件才触发； -->
        <button @click.ctrl="sts">点我一下</button>
        <!-- 测试精准组合修饰符 只按下了ctrl，单击事件才触发； -->
        <button @click.ctrl.exact="sts">点我一下</button>
    </div>


    <script src="./js/dev/vue.js"></script>

    <script>

        const app = new Vue({
            el: '.container',
            data: {
                taskName: '',
                tasks: (localStorage.getItem('tasks') ? JSON.parse(localStorage.getItem('tasks')) : null) || []
            },
            methods: {
                setTask() {
                    localStorage.setItem('tasks', JSON.stringify(this.tasks))
                },
                add() {
                    if (!this.taskName || !this.taskName.trim()) {
                        alert('任务名称不能为空..')
                        this.taskName = ''
                        return
                    }
                    this.tasks.push(this.taskName)
                    this.setTask()
                    this.taskName = ''
                },
                keyAdd(event) {
                    // console.log(event);
                    if (event.code === 'Enter') {
                        this.add()
                    }
                },
                del(i) {
                    this.tasks.splice(i, 1)
                    this.setTask()
                },
                clear() {
                    this.tasks = []
                    this.setTask()
                },
                sts(event) {
                    alert(123)
                    event.preventDefault()
                }
            }
        })
    </script>
</body>

</html>